<template>
	<view class="withdrawal_container">
		<!-- v-if="isShowWithdrawal" -->
		<view class="withdrawal_box" v-if="isShowWithdrawal">
			<view class="withdrawal_banner_box">
				<view class="withdrawal_banner_all">
					<image :src="bannerImg" mode="" class="withdrawal_banner_img"></image>
				</view>
				<view class="account_balance_box">
					<view class="account_balance_title">
						账户剩余金额:
					</view>
					<view class="account_balance_number">
						{{ personMsgObj.yj ? personMsgObj.yj : '0' }}
					</view>
				</view>
			</view>

			<view class="withdrawal_detail_box">
				<!-- 提现方式 -->
				<view class="method_top_title">
					选择提现方式
				</view>
				<view class="withdrawal_method_box">
					<view class="withdrawal_method_all" v-for="(item, index) in paymentList" :key="item.id"
						:class="[isActive == item.id ? 'withdrawal_method_all_active' : '']"
						@click="handlerPayment(item)">
						<view class="withdrawal_method_img">
							<image :src="item.img" mode="" class="method_img"></image>
						</view>
						<view class="withdrawal_method_title">
							{{item.name}}
						</view>

						<view class="right_arrow_box">
							<image src="/static/withdrawal/icon-arrow.png" mode="" class="right_arrow_img"></image>
						</view>
					</view>
				</view>

				<view class="" v-if="isActive == 'alipay'">
					<view class="method_top_title">
						支付宝姓名
					</view>
					<view class="methods_input_box">
						<u-input v-model="zfbObj.zfbnameValue" placeholder="请填写支付宝姓名"
							placeholder-style="font-size: 14px;font-weight: 400;color: #808080;	font-family: all-font;"
							:border="false" :clearable="false" />
					</view>

					<view class="method_top_title">
						支付宝账号
					</view>
					<view class="methods_input_box">
						<u-input v-model="zfbObj.zfbaccountValue" placeholder="请填写支付宝账号"
							placeholder-style="font-size: 14px;font-weight: 400;color: #808080;	font-family: all-font;"
							:border="false" :clearable="false" />
					</view>

					<view class="method_top_title">
						提现金额
					</view>
					<view class="methods_input_box" style="display: flex; align-items: center;">
						<view class="input_icon_box">
							￥
						</view>
						<view class="">
							<u-input v-model="priceValue" placeholder="请输入提现金额"
								placeholder-style="font-size: 28rpx;font-weight: 400;color: #808080;	font-family: all-font;"
								:border="false" :clearable="false" />
						</view>
					</view>
				</view>

				<view class="" v-else-if="isActive == 'bank'">
					<view class="method_top_title">
						收款人姓名
					</view>
					<view class="methods_input_box">
						<u-input v-model="bankObj.collectionnameValue" placeholder="请填写收款人姓名"
							placeholder-style="font-size: 14px;font-weight: 400;color: #808080;	font-family: all-font;"
							:border="false" :clearable="false" />
					</view>

					<view class="method_top_title">
						银行卡号
					</view>
					<view class="methods_input_box">
						<u-input v-model="bankObj.collectionaccountValue" placeholder="请填写收款账号"
							placeholder-style="font-size: 14px;font-weight: 400;color: #808080;	font-family: all-font;"
							:border="false" :clearable="false" />
					</view>

					<view class="method_top_title">
						开户行
					</view>
					<view class="methods_input_box">
						<u-input v-model="bankObj.collectionbankValue" placeholder="请填写开户行"
							placeholder-style="font-size: 14px;font-weight: 400;color: #666666;	font-family: all-font;"
							:border="false" :clearable="false" />
					</view>

					<view class="method_top_title">
						提现金额
					</view>
					<view class="methods_input_box" style="display: flex; align-items: center;	font-family: all-font;">
						<view class="input_icon_box">
							￥
						</view>
						<view class="">
							<u-input v-model="priceValue" placeholder="请输入提现金额"
								placeholder-style="font-size: 28rpx;font-weight: 400;color: #808080;	font-family: all-font;"
								:border="false" :clearable="false" />
						</view>
					</view>
				</view>

				<!-- 提示 -->
				<view class="methods_tip">
					{{changeCommission}}
				</view>

				<!-- 按钮 -->
				<view class="submit_box" @click="handlerSubmit">
					提交申请
				</view>
			</view>
		</view>

		<!-- 提示弹窗 -->
		<!-- <u-popup v-model="isShowWithdrawal" mode="center" :closeable="true" close-icon-color="#000" border-radius="12">
			<view class="prompt_popup_box">
				<h3 class="prompt_popup_title">注意事项</h3>
				<p>佣金提现操作可能会用到您的支付宝和银行卡信息，但都是经过加密处理，不会对外泄露，望周知</p>
				<view class="prompt_popup_btn">
					<u-button type="info" class="prompt_btn" @click="handleDisagree">不同意</u-button>
					<u-button type="primary" class="prompt_btn" @click="handleAgree">同意</u-button>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				bannerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668398a65bedb_1719900326.png',
				priceValue: '',
				wxObj: {
					wxnameValue: '',
					wxaccountValue: '',
				},
				zfbObj: {
					zfbnameValue: '',
					zfbaccountValue: '',
				},
				bankObj: {
					collectionnameValue: '',
					collectionaccountValue: '',
					collectionbankValue: '',
				},
				paymentList: [ // 支付宝1,银行卡2
					// {
					// 	id: 'weixin',
					// 	name: '微信',
					// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836d01eaa6c_1719889153.png'
					// }, 
					{
						id: 'alipay',
						name: '支付宝',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836d3780abe_1719889207.png'
					},
					{
						id: 'bank',
						name: '银行卡',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836d1d19657_1719889181.png'
					},
				],
				isActive: 'alipay',
				personMsgObj: {},
				payType: '1',
				showPrompt: true,
				isShowWithdrawal: '',
				changeCommission: ''
			}
		},
		onShow() {
			this.moveterConfig()
			this.getUserInfo()
			this.getConfig()
		},
		methods: {
			// 获取注意事项的手续费接口
			getConfig() {
				this.$request('/api/getConfig', {
					config: 'get_pay_charge'
				}, 'GET').then(res => {
					if (res.code == 1) {
						let number = res.data * 100
						this.changeCommission = `注意：支付金额需要≥1元，支付宝提现、银行卡提现需收取${number}%手续费！支付宝姓名填写真实姓名！`
					} else {
						return
					}
				})
			},

			// 控制
			moveterConfig() {
				this.$request('/api/moveterConfig', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.isShowWithdrawal = res.data.get_pay
					} else {
						return
					}
				})
			},

			// 不同意
			handleDisagree() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},

			// 同意
			handleAgree() {
				this.isShowWithdrawal = ''
			},

			// 获取用户信息
			getUserInfo() {
				this.$request('/api/getFxuserLoginInfo', {}, 'GET').then(res => {
					if (res.code == 1) {
						this.personMsgObj = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 申请提现接口
			withdrawal() {
				this.$request('/api/addGetpayFront', {
					is_agent: '0', // h5:0, 后台:1
					type: this.payType,
					amount: this.priceValue,
					username: this.bankObj.collectionnameValue,
					bankcard: (this.bankObj.collectionaccountValue.replace(/[, ]/g, '')),
					openbank: this.bankObj.collectionbankValue,
					alipay: this.zfbObj.zfbaccountValue,
					alipayname: this.zfbObj.zfbnameValue,
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 切换支付方式
			handlerPayment(val) {
				this.isActive = val.id
				if (this.isActive == 'alipay') {
					this.payType = '1'
				} else if (this.isActive == 'bank') {
					this.payType = '2'
				}
				this.zfbObj = {}
				this.bankObj = {}
				this.priceValue = ''
			},

			// 提交申请
			handlerSubmit: Throttle(function() {
				if (this.isActive == 'alipay') {
					if (this.zfbObj.zfbnameValue == '') {
						uni.showToast({
							title: '请填写支付宝姓名',
							icon: 'none'
						})
						return
					} else if (this.zfbObj.zfbaccountValue == '') {
						uni.showToast({
							title: '请填写支付宝账号',
							icon: 'none'
						})
						return
					}
				} else if (this.isActive == 'bank') {
					if (this.bankObj.collectionnameValue == '') {
						uni.showToast({
							title: '请填写收款人姓名',
							icon: 'none'
						})
						return
					} else if (this.bankObj.collectionaccountValue == '') {
						uni.showToast({
							title: '请填写收款账号',
							icon: 'none'
						})
						return
					} else if (this.bankObj.collectionbankValue == '') {
						uni.showToast({
							title: '请填写开户行',
							icon: 'none'
						})
						return
					}

					if (this.priceValue == '') {
						uni.showToast({
							title: '请输入提现金额',
							icon: 'none'
						})
						return
					}
				}

				if (Number(this.priceValue) > Number(this.personMsgObj.yj)) {
					uni.showToast({
						title: '请输入小于等于余额的金额',
						icon: 'none'
					})
					return
				}
				this.withdrawal()
			}, 5000)
		}
	}
</script>

<style lang="scss" scoped>
	.withdrawal_container {
		padding: 0 22rpx;

		.withdrawal_box {

			.withdrawal_banner_box {
				position: relative;

				.withdrawal_banner_all {
					width: 100%;
					height: 143rpx;

					.withdrawal_banner_img {
						width: 100%;
						height: 100%;
					}
				}

				.account_balance_box {
					position: absolute;
					top: 50%;
					left: 65rpx;
					transform: translateY(-50%);
					font-family: FZLanTingHeiS-R-GB;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 38rpx;
					text-shadow: 0px 2rpx 7rpx rgba(77, 152, 240, 0.98);

					.account_balance_title {
						font-family: all-font;
					}

					.account_balance_number {
						font-family: my-font;
						font-size: 37rpx;
						padding-top: 4rpx;
					}
				}
			}

			.withdrawal_detail_box {
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 33rpx 39rpx 41rpx 38rpx;

				.method_top_title {
					font-family: all-font;
					font-weight: 500;
					font-size: 30rpx;
					color: #262626;
					padding-bottom: 32rpx;
				}

				.withdrawal_method_box {
					display: flex;
					padding-bottom: 38rpx;

					.withdrawal_method_all {
						position: relative;
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						width: 191rpx;
						height: 81rpx;
						background: #FFFFFF;
						box-shadow: 0px 7rpx 7rpx 1px rgba(241, 241, 241, 0.76);
						border-radius: 10rpx;
						border: 2rpx solid #E6E6E6;
						margin-right: 28rpx;

						.withdrawal_method_img {
							width: 64rpx;
							height: 64rpx;

							.method_img {
								width: 100%;
								height: 100%;
							}
						}

						.withdrawal_method_title {
							font-family: all-font;
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
						}

						.right_arrow_box {
							position: absolute;
							top: -10rpx;
							right: 0;
							display: none;

							.right_arrow_img {
								width: 25rpx;
								height: 23rpx;
							}
						}
					}

					.withdrawal_method_all_active {
						position: relative;
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						width: 191rpx;
						height: 81rpx;
						background: #F7FBFF;
						box-shadow: 0px 7rpx 7rpx 1px rgba(241, 241, 241, 0.76);
						border-radius: 10rpx;
						border: 2rpx solid #3F95FF;
						margin-right: 28rpx;

						.withdrawal_method_img {
							width: 64rpx;
							height: 64rpx;

							.method_img {
								width: 100%;
								height: 100%;
							}
						}

						.withdrawal_method_title {
							font-family: all-font;
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
						}

						.right_arrow_box {
							position: absolute;
							top: -10rpx;
							right: 0;
							display: block;

							.right_arrow_img {
								width: 25rpx;
								height: 23rpx;
							}
						}
					}
				}

				.methods_input_box {
					width: 628rpx;
					height: 70rpx;
					background: #FAFAFA;
					border-radius: 8rpx;
					border: 1px solid #F0F0F0;
					font-family: my-font;
					padding-left: 29rpx;
					margin-bottom: 39rpx;

					.input_icon_box {
						padding-right: 6rpx;
					}
				}

				.submit_box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 635rpx;
					height: 84rpx;
					background: #4889FF;
					border-radius: 42rpx;
					font-family: all-font;
					font-weight: 500;
					font-size: 34rpx;
					color: #FFFFFF;
					margin-top: 121rpx;
				}

				.methods_tip {
					width: 620rpx;
					height: 61rpx;
					font-family: all-font;
					font-weight: 400;
					font-size: 22rpx;
					color: #808080;
				}
			}

		}

		.prompt_popup_box {
			width: 680rpx;
			padding: 50rpx 20rpx 30rpx;

			.prompt_popup_title {
				font-size: 31rpx;
				text-align: center;
				padding-bottom: 30rpx;
			}

			.prompt_popup_btn {
				display: flex;
				padding-top: 50rpx;

				.prompt_btn {
					flex: 1;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>